<!--  -->
<template>
  <div class="stical">
    <div class="nav">
      <Nav @gan='chang'/>
    </div>
     <component :is="currentTabComponent"></component>
  </div>
</template>
<script>
import Nav from'@/components/admin/portal/statistical/Nav.vue'
import Message from'@/components/admin/portal/statistical/Messag.vue'
import Analysis from'@/components/admin/portal/statistical/Analysis.vue'

export default {
  components: {
   Nav,
      Analysis,
      Message
  },
  data() {
    return {
         currentIndex: 0,
           arr:['Analysis','Message']
    }
  },
  created() {},
  methods: {
    chang(data){
      this.currentIndex= data
    }
  },
   computed: {
    currentTabComponent() {
      return this.arr[this.currentIndex]
    },
  },
}
</script>

<style lang='scss' scoped>
.stical{
  width: 100%;

  flex-grow: 1;
  flex-wrap: wrap;
  height: 829px;
  .nav{
    width: 100%;
    height: 60px;

  }
}
</style>
